<script setup>
import { onLoad } from '@dcloudio/uni-app'	
import { ref } from 'vue';
import { buyBookApi, getPayBookInfoApi } from '@/api/index.js';
import { md5 } from 'js-md5';
import NavBar from '@/components/navbar/index.vue'

let bookId = null
const payData =ref(null)
onLoad(({id})=>{
	bookId = id
	getPayInfo(id)
})
const getPayInfo = async (booksId) =>{
	const { obj } = await getPayBookInfoApi({booksId})
	payData.value = obj
}
const buyBook = async () =>{
	try{
		const { obj } = await buyBookApi({
			booksId: bookId,
			flag: 0,
			source: 6,
			type: 1
		})
		payByWeiXin(obj.data)
	}catch(e){
		console.error(e)
	}
}
const payByWeiXin = (data) =>{
	let random = (Math.random()).toString() //这个随机数，就是个坑，一定要变成字符串
	let mch_key = 'O9BOc1oJxMENv9kRiGRgaUeacoXBB429'
	let obj = {
		appId: data.appid,
		nonceStr: random,
		package: data.package,
		signType:'MD5',
		timeStamp: data.timeStamp
	}
	let arr = Object.keys(obj).sort().map(item => {
		return `${item}=${obj[item]}`;
	});
	let str = arr.join('&') + '&key=' + mch_key;
	let paySign = md5(str).toUpperCase()
	uni.requestPayment({
		"timeStamp":  data.timeStamp,
		"nonceStr": random,
		"package": data.package,
		"signType": "MD5",
		"paySign": paySign,
		"success":function(res){
		//在支付成功的回调里面，还行执行其他方法就要加setTimeout
			uni.showToast({
				title: '支付成功',
				icon:'success'
			})
			setTimeout(function(){
				uni.redirectTo({
					url: '/pages/web-view/index?data=' + encodeURIComponent(JSON.stringify({id: bookId})),
				})
			},1500)
		},
		"fail":function(res){
			console.log(res);
			if (res.errMsg==='requestPayment:fail cancel') {
				uni.showToast({title: '用户取消支付',icon:'none',duration:2000})
			} else {
				uni.showToast({title: res.errMsg,icon:'none',duration:2000})
			}
		},
		"complete":function(res){}
	})
}	
</script>

<template>
	<NavBar :underNavBar="false" />
	<view 
	  class="pay-info"
	>
	  <image class="cover" :src="payData?.cover"/>
	  <view class="pay-info-right">
	    <text class="pay-info-title">{{payData?.name}}</text>
			<text>人教PEP版</text>
	    <text class="pay-info-validdate">{{`有效期: ${payData?.memberDay}天`}}</text>
			<text class="pay-info-price">{{`￥${payData?.salePrice}`}}</text>
	  </view>    
	</view>
	<view class="pay-btn" @click="buyBook">
		<text>确认支付</text>
	</view>
</template>


<style lang="scss">
page{
	background: #F3F3F3;
}	
.pay-info{
  width: 686rpx;
  height: 350rpx;
  display: flex;
  margin: 10rpx 32rpx 0 32rpx;
  border-radius: 15rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background: white;
	.pay-info-right{
	  width: 454rpx;
		height: 300rpx;
	  display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		// margin: 10rpx 0 0 20rpx;
		margin-left: 20rpx;
		// background: rebeccapurple;
		.pay-info-title{
			font-size: 32rpx;
		}
		.pay-info-validdate{
			color: #8F8F8F;
		}
		.pay-info-price{
			// color: #8F8F8F;
		}
	}
}
.cover{
  width: 212rpx;
  height: 100%;
  flex-shrink: 1;
  border-radius: 15rpx;
}
.pay-btn{
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 120rpx;
  color: #4B442B;
  display: flex;
	flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFD43F;
}	
</style>